<template>
	<div>
		<van-tabs 
			:class="needFilter && 'tabs-item'" 
			sticky
			v-model="kind_index" 
			@change="change"
		>
			<van-tab 
				v-for="val in cateList " 
				:key="val.kind" 
				:title="val.name"
			>
			</van-tab>
		</van-tabs>
		<filter-wrap 
			ref="filterWrap"
			v-if="needFilter" 
			:type="kind" 
			:options="filtesOption"
			@change="filter"
		/>
		<prod-list 
			v-if="tab_total"
			name="slot" 
			:params="list_filter"
		/>
		<no-data v-else/>
	</div>
</template>
<script>
import {
	Tabs,
	Tab
} from 'vant'
import GoodsList from '../components/product-list';//产品模块
import FilterList from '@cmpt/listFilter/navFilter';//排序筛选模块
 import { getConfig } from '@/api/modules/index';
 import NoData from '@cmpt/no-data'
import { 
	getProdTabs,
	getFilterArea,
} from '@/api/modules/product'//接口
export default {
    name: 'list-wrap',
    components:{
			[Tabs.name]: Tabs,
			[Tab.name]: Tab,
			[GoodsList.name]: GoodsList,
			[FilterList.name]:FilterList,
			[NoData.name]: NoData
    },
    data(){
			return {
				kind_index: 0,
				kind: null,
				tab_total: 1,
				tabList: [],
				cateList: [],
				filtesOption: [
					{title: '城市', type: 'area', list: []},
					{title: '默认排序', type: 'sort', list: [{
							text: '默认排序',
							value: 0
						},{
							text: '销量倒序',
							value: 1
						},{
							text: '价格正序',
							value: 2
						},{
							text: '价格倒序',
							value: 3
						},]
					}
				],
				list_filter: {
					area: 0,
					sort: 0,
					kind: null,
					kind_name: ''
				},
			}
	},
	props: {
		needFilter: {
			type: Boolean,
			default: true
		},
		needMenus: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		kind(nw) {
			// NOTE: 注意区分出现''和0的情况
			this.list_filter.kind = nw
			this.list_filter.kind_name = (this.cateList.find(item => {
				return nw === '' ? item.kind === '' : item.kind == nw
			}) || {}).name || '全部'
			this.needMenus || this.getAreaByCate()
		},
		tabList(nw) {
			this.$emit('catemenus', nw)
			this.cateList = [{kind: '', name: '全部'}].concat(nw)
			this.checkedCate()
			this.tab_total = nw.length
		}
	},
	created(){
		this.getCate()
	},
	methods:{
		// 获取产品分类方法
		async getCate () {
			getConfig('product_kind')
				.then(res => {
						if(res.data.product_kind){
							this.tabList = []
							res.data.product_kind.forEach(item => {
								item.kind = Number(item.kind)
								this.tabList.push(item)
							})
						}else{
							this.cateList = [{kind: '', name: '全部'}]
						}
				})
				.catch(err => {
					this.cateList = [{kind: '', name: '全部'}]
				})
		},
		// 通过分类获取区域
		getAreaByCate () {
			getFilterArea(this.kind)
				.then(res => {
					let area = []
					for(let code in res.data){
						area.push({
							value: code,
							text: res.data[code]
						})
					}
					this.filtesOption[0].list = area
				})
		},
		change(index) {
			this.kind = this.cateList[index].kind
			this.filtesOption[0].title = '城市'
			this.filtesOption[1].title = '默认排序'
			this.$mergePageParams({
				kind: this.kind
			})
		},
		filter(data) {
			this.list_filter[data.type] = data.value
		},
		// 判断url参数，并选中
		checkedCate() {
			const kind = this.$getUrlParam('kind') || null
			if(kind || kind === 0){
				this.kind = kind == 'all' ? '' : kind
			}else{
				this.kind = this.cateList[0].kind
			}

			this.cateList.forEach((item, index) => {
				if(item.kind == kind){
					this.kind_index = index
				}
			})

		}
	},
}
</script>
<style lang="less" scoped>
  .tabs-item /deep/ .van-hairline--top-bottom::after{
    display: none;
  }
</style>